<template>
  <header id="header">
    <slot name="logo"></slot>
    <section v-if="goback" class="head_goback" @click="$router.go(-1)">
      <span class="iconfont icon-xiangzuo-copy allcol"></span>
    </section>
    <section v-if="headerTitle" class="head_title">
      <router-link
        class="allcol"
        :to="{ path: '/city', query: { fromCity } }"
        >{{ headerTitle }}</router-link
      >
    </section>
    <section v-if="signinUp" class="head_login">
      <router-link :to="profile ? '/user' : '/login'">
        <span v-if="profile" class="iconfont icon-mine-red allcol"></span>
        <span class="login_span allcol" v-else>登录|注册</span>
      </router-link>
    </section>

    <slot name="search"></slot>
    <slot name="eleme"></slot>
    <slot name="title"></slot>
    <slot name="update"></slot>
    <slot name="switchCity"></slot>
  </header>
</template>

<script>
export default {
  props: ["goback", "signinUp", "headerTitle", "profile", "fromCity"],
  methods: {
    switchCity() {
      this.$router.push("/city");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

#header {
  @include wh(100%, 1.95rem);
  background: $blue;
  position: absolute;
  top: 0;
}
.head_goback {
  @include ct;
  left: 0.3rem;
  line-height: 2.2rem;
}
.head_login {
  @include ct;
  right: 0.3rem;
  line-height: 2.2rem;
  // margin-right: 0.3rem;
  // position: absolute;
  // right: 0;
  // @include ct;
}
.head_title {
  max-width: 7.5rem;
  width: 7.5rem;
  @include center;

  color: #fff;
  a {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.allcol {
  @include sc(0.65rem, #fff);
}
</style>
